<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id='ng-app' ng-app="angular-google-maps-example">
<head>
    <meta charset="UTF-8">
    <title>angular-google-maps example page</title>
    <!-- See https://rawgithub.com/ as it returns the correct mimetypes that are requested from github.-->
    <!-- make IE Happy , http://docs.angularjs.org/guide/ie -->
    <!--[if lte IE 9]>
    <script>
        window.html5 = {
            'elements': 'marker window windows markers layer polyline ng-controller ng-repeat ng-init ng-model ng-hide ng-show'
        };
    </script>

    <script src="//rawgithub.com/bestiejs/json3/v3.2.5a/lib/json3.min.js"></script>
    <script src="//rawgithub.com/kriskowal/es5-shim/v2.1.0/es5-shim.min.js"></script>
    <script src="//rawgithub.com/jwmcpeak/EventShim/master/eventShim.js"></script>
    <script src="//rawgithub.com/aFarkas/html5shiv/3.7.0/src/html5shiv.js"></script>
    <![endif]-->

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
    <link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,600,300,700'
          rel='stylesheet' type='text/css'>
    <link href="./assets/stylesheets/example.css" rel="stylesheet" type="text/css">
</head>

<body ng-controller="ExampleController">
<!--	You can use either a div having class 'google-map' or the '<ui-gmap-google-map>' element; in
    the latter case, uncomment the style above to make sure the custom elements gets block display	-->

<div class="container">
<div class="row">
    <div class="page-title">
        <h2>angular-google-maps: <span ng-cloak>{{version}}</span>, google-maps: <span ng-cloak>{{googleVersion}}</span></h2>
    </div>
    <button class="btn btn-danger" ng-click="removeMarkers()">Clear Map</button>
    <button class="btn btn-success" ng-click="refreshMap()">Refresh Map</button>
    <button class="btn btn-success" ng-click="getMapInstance()">Get Map Instance</button>
    Show Map: <input type="checkbox" text="Show / Hide Map" ng-model="map.show">
</div>
<div class="row" ng-if="map.show">
    <ui-gmap-google-map class="col-md-8"
         center="map.center"
         zoom="map.zoom"
         dragging="map.dragging"
         bounds="map.bounds"
         events="map.events"
         options="map.options"
         pan="true"
         control="map.control"
        >

        <ui-gmap-map-control template="control.tpl.html" position="top-right" index="1" controller="controlController"></ui-gmap-map-control>

        <ui-gmap-layer type="TrafficLayer" show="map.showTraffic"></ui-gmap-layer>
        <ui-gmap-layer type="BicyclingLayer" show="map.showBicycling"></ui-gmap-layer>
        <ui-gmap-layer namespace="weather" type="WeatherLayer" show="map.showWeather"></ui-gmap-layer>
        <ui-gmap-layer namespace="visualization" type="HeatmapLayer" show="map.showHeat" onCreated="map.heatLayerCallback"></ui-gmap-layer>
        <ui-gmap-drag-zoom keyboardkey="'alt'"></ui-gmap-drag-zoom>

        <!--WINDOWS without markers-->
        <!--NOTICE THEY MUST BE PRIOR TO ANY MARKERS OR THEY WILL ATTACH THEMSELVES walking up the dom tree-->
        <ui-gmap-window show="map.infoWindow.show" coords="map.infoWindow.coords" isIconVisibleOnClick="false" options="map.infoWindow.options"  ng-cloak>
            <div>
                <p>This is an info window at {{ map.infoWindow.coords.latitude | number:4 }}, {{ map.infoWindow.coords.longitude | number:4 }}!</p>
                <div ng-controller='InfoController'>
                    I should not be attached to a
                    marker.

                    <a class="btn" ng-click="clickedButtonInWindow()">CLICK ME</a>
                </div>
            </div>
        </ui-gmap-window>


        <ui-gmap-window show="map.infoWindowWithCustomClass.show" coords="map.infoWindowWithCustomClass.coords" isIconVisibleOnClick="false" options="map.infoWindowWithCustomClass.options">
            I'm a window with a custom class set via options.boxClass. I only work when googles
            <a href ="//google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html#InfoBoxOptions">infoBox plugin</a> is included.
        </ui-gmap-window>

        <ui-gmap-window show="map.templatedInfoWindow.show" coords="map.templatedInfoWindow.coords"
                options="map.templatedInfoWindow.options"
                templateUrl="map.templatedInfoWindow.templateUrl"
                templateParameter="map.templatedInfoWindow.templateParameter" ng-cloak>
        </ui-gmap-window>

        <ui-gmap-marker coords="staticMarker.coords" options="staticMarker.options" events="staticMarker.events" idKey="staticMarker.id">
        </ui-gmap-marker>

        <ui-gmap-markers models="map.randomMarkers" coords="'self'" icon="'icon'" click="onMarkerClicked"
                    doCluster="map.doClusterRandomMarkers" clusterOptions="map.clusterOptions" modelsbyref="true">
        </ui-gmap-markers>

        <ui-gmap-markers models="map.markers2" coords="'self'" icon="'icon'" click="onMarkerClicked" options="'options'" events="map.markers2Events">
            <ui-gmap-windows show="'showWindow'" closeClick="'closeClick'" ng-cloak>
                <div>
                    I should not be attached to a
                    marker.
                    <div ng-controller='InfoController'>
                        <a class="btn" ng-click="clickedButtonInWindow()">CLICK ME</a>
                    </div>
                    <p ng-non-bindable >This is an info window at {{ latitude | number:4 }}, {{ longitude | number:4 }}!</p>

                    <p class="muted">My marker will stay open when the window is popped up!</p>
                </div>
            </ui-gmap-windows>
        </ui-gmap-markers>

        <ui-gmap-markers models="map.clickMarkers" coords="'self'" click="clackMarker" >
        </ui-gmap-markers>

        <ui-gmap-markers models="map.dynamicMarkers" coords="'self'" icon="'icon'" click="onMarkerClicked" fit='true'>
            <ui-gmap-windows show="'showWindow'" closeClick="'closeClick'" ng-cloak>
                <div>
                    <p>Dynamic Marker created via a delay!</p>

                    <p ng-non-bindable>This is an info window at {{ latitude | number:4 }}, {{ longitude | number:4 }}!</p>

                    <p class="muted">My marker will stay open when the window is popped up!</p>
                </div>
            </ui-gmap-windows>
        </ui-gmap-markers>

        <ui-gmap-markers idKey="map.mexiIdKey" models="map.mexiMarkers" coords="'self'" icon="'icon'" click="onMarkerClicked" >
            <ui-gmap-windows show="'showWindow'" closeClick="'closeClick'" ng-cloak>
                <div>
                    <p>Mexi!</p>
                    <p ng-non-bindable>This is an info window at {{ latitude | number:4 }}, {{ longitude | number:4 }}!</p>
                    <p class="muted">My marker will stay open when the window is popped up!</p>
                </div>
            </ui-gmap-windows>
        </ui-gmap-markers>

        <!-- predefined markers -->
        <!-- rendering via ng-repeat, HIGH OVERHEAD via DOM Manipulation -->
        <ui-gmap-marker ng-repeat="m in map.markers" coords="m" icon="m.icon" click="onMarkerClicked(m)" idKey="m.id" options="m.options">
            <ui-gmap-window ng-cloak  coords="m.coords" isIconVisibleOnClick="false" options="map.infoWindowWithCustomClass.options">
                    <p>This is an info window at {{ m.latitude | number:4 }}, {{ m.longitude | number:4 }}!</p>
                    <p class="muted">My marker will stay open when the window is popped up!</p>
            </ui-gmap-window>
        </ui-gmap-marker>

         <!--marker for clicked position can not put google.map.animations.BOUNCE , since it is not initiaized yet-->
        <!--DISABLED ANIMATION on MarkerLABEL due to Google SDK V3 bug, see MarkerLabelChildModel.setOption -->
        <!--<div ng-init="opts = {animation:1}">-->
        <ui-gmap-marker coords="map.clickedMarker"  idKey="map.clickedMarker.id" options="map.clickedMarker.options">
        </ui-gmap-marker>
        <!--</div>-->

        <!-- polyline example -->
        <ui-gmap-polyline ng-repeat="p in map.polylines" path="p.path" stroke="p.stroke" visible='p.visible'
            geodesic='p.geodesic' fit="false" editable="p.editable" draggable="p.draggable" icons='p.icons'>
        </ui-gmap-polyline>

        <!-- polygon example -->
        <ui-gmap-polygon static="true" ng-repeat="p in map.polygons track by p.id" path="p.path" stroke="p.stroke" visible="p.visible"
            geodesic="p.geodesic" fill="p.fill" fit="false" editable="p.editable" draggable="p.draggable" events="map.polygonEvents">
        </ui-gmap-polygon>

        <ui-gmap-polygon ng-repeat="p in map.polygons2 track by p.id" path="p.path" stroke="p.stroke" visible="p.visible"
                 geodesic="p.geodesic" fill="p.fill" fit="false" editable="p.editable" draggable="p.draggable"
                 events="map.polygonEvents">
        </ui-gmap-polygon>

        <!-- circle example -->
        <ui-gmap-circle ng-repeat="c in map.circles track by c.id" center="c.center" stroke="c.stroke" fill="c.fill" radius="c.radius"
            events="c.events" visible="c.visible" geodesic="c.geodesic"
            editable="c.editable" draggable="c.draggable" clickable="c.clickable">
        </ui-gmap-circle>

        <ui-gmap-rectangle bounds="map.rectangle.bounds" stroke="rectangle.stroke" visible="map.rectangle.visible"
                 fill="map.rectangle.fill" fit="false" editable="map.rectangle.editable" draggable="map.rectangle.draggable"
                 events="map.rectangle.events">
        </ui-gmap-rectangle>

</ui-gmap-google-map>
<div class="col-md-4">
    <fieldset>
        <table class="table">
            <tbody>
            <tr>
                <td>
                    <strong>Layers</strong>
                </td>
                <td>
                    Traffic: <input type="checkbox" text="TrafficLayer On/Off" ng-model="map.showTraffic">
                    Bicycling: <input type="checkbox" text="BicyclingLayer On/Off" ng-model="map.showBicycling">
                    Weather: <input type="checkbox" text="Weather On/Off" ng-model="map.showWeather">
                    Heat: <input type="checkbox" text="Heat On/Off" ng-model="map.showHeat">
                </td>
            </tr>
            <tr>
                <td>center</td>
                <td>
                    <pre ng-cloak>
                        <span ng-show="map.center.latitude >= 0">&nbsp;
                        </span>
                        {{ map.center.latitude | number:4 }} lat
                        <br>
                        <span ng-show="map.center.longitude >= 0">&nbsp;
                        </span>{{ map.center.longitude | number:4 }} lng
                    </pre>
                </td>
            </tr>
            <tr>
                <td>zoom</td>
                <td>{{ map.zoom }}</td>
            </tr>
            <tr>
                <td>bounds</td>
                <td>
                    <pre ng-cloak>
                        north-east: {{ map.bounds.northeast.latitude | number:4 }},{{ map.bounds.northeast.longitude | number:4 }}
                        <br>
                        south-west: {{ map.bounds.southwest.latitude | number:4 }},{{ map.bounds.southwest.longitude | number:4 }}
                    </pre>
                </td>
            </tr>
            <tr>
                <td>dragging</td>
                <td ng-cloak>{{ map.dragging }}</td>
            </tr>
            <tr>
                <td>Generate Random Markers</td>
                <td>
                    <div>Do Cluster?: <input type="checkbox" ng-model="map.doClusterRandomMarkers"></div>
                    <div>Cluster Options: <input type="text" ng-model='map.clusterOptionsText'>
                      <div ng-repeat="cType in map.clusterTypes">
                        {{cType}}
                        <input ng-model="map.currentClusterType" type="radio" id="{{cType}}" value="{{cType}}" ng-change="map.selectClusterType(cType)">
                      </div>
                    </div>
                    <div ng-init="numOfMarkers = 1000">
                        <input type="text" text="Number of Markers" ng-model="numOfMarkers">
                        <button ng-click="genRandomMarkers(numOfMarkers)">Generate</button>
                    </div>
                </td>
            </tr>
            <tr ng-show="map.rectangle !== null">
                <td>rectangle</td>
                <td>
                    <div class="well sidebar-nav">
                        <ul class="nav nav-list">
                            <li ng-cloak>
                                <a href="#">
                                    <i class="i" >
                                        Rectangle: {{map.rectangle}}
                                    </i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr ng-show="map.markers.length >= 0">
                <td>markers</td>
                <td>
                    <div class="well sidebar-nav">
                        <ul class="nav nav-list">
                            <li ng-repeat="m in map.markers" ng-click="m.showWindow = true" ng-cloak>
                                <a href="#">
                                    <i class="i" title="Click me to Show InfoWindow!">
                                        Marker: {{m}}
                                    </i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr ng-show="map.markers2.length >= 0">
                <td>markers2</td>
                <td>
                    <div class="well sidebar-nav">
                        <ul class="nav nav-list">
                            <li ng-repeat="m in map.markers2" ng-click="m.showWindow = true" ng-cloak>
                                <a href="#">
                                    <i class="i" title="Click me to Show InfoWindow!">
                                        Marker: {{m}}
                                    </i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr ng-show="map.dynamicMarkers.length >= 0">
                <td>dynamicMarkers</td>
                <td>
                    <div class="well sidebar-nav">
                        <ul class="nav nav-list">
                            <li ng-repeat="m in map.dynamicMarkers" ng-click="m.showWindow = true" ng-cloak>
                                <a href="#">
                                    <i class="i" title="Click me to Show InfoWindow!">
                                        Marker: {{m}}
                                    </i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr>
                <td>clicked position</td>
                <td>
                        <pre ng-show="map.clickedMarker.latitude != null && map.clickedMarker.longitude != null" ng-cloak>
                            <span ng-show="map.clickedMarker.latitude >= 0">&nbsp;
                            </span>
                            {{ map.clickedMarker.latitude | number:4 }} lat
                            <br>
                            <span ng-show="map.clickedMarker.longitude >= 0">&nbsp;</span>
                            {{ map.clickedMarker.longitude | number:4 }} lng
                        </pre>
                    <span ng-show="map.clickedMarker.latitude == null || map.clickedMarker.longitude == null">Click the map to see</span>
                </td>
            </tr>
            <tr>
                <td>polylines</td>
                <td>
                    <div class="well sidebar-nav">
                        <ul class="nav nav-list">
                            <li ng-repeat="p in map.polylines" ng-cloak>
                                <a href="#">
                                    <i class="i" title="Click me to Show InfoWindow!">
                                        <span class="{{p.visible}}" ng-click="p.visible = !p.visible">Polyline:</span> {<br/>
                                            <span style="padding-left: 5em" class="{{p.visible}}"
                                                  ng-click="p.visible = !p.visible">visible: {{p.visible}}</span>, <br/>
                                            <span style="padding-left: 5em" class="{{p.editable}}"
                                                  ng-click="p.editable = !p.editable">editable: {{p.editable}}</span>,
                                        <br/>
                                            <span style="padding-left: 5em" class="{{p.draggable}}"
                                                  ng-click="p.draggable = !p.draggable">draggable: {{p.draggable}}</span>,
                                        <br/>
                                            <span style="padding-left: 5em" class="{{p.geodesic}}"
                                                  ng-click="p.geodesic = !p.geodesic">geodesic: {{p.geodesic}}</span>,
                                        <br/>
                                        <span style="padding-left: 5em">stroke: {</span> <br/>
                                            <span ng-click="p.stroke.weight = (p.stroke.weight % 5) +1"
                                                  style="padding-left: 10em">weight: {{p.stroke.weight}}</span> <br/>
                                            <span ng-click="p.stroke.color = toggleColor(p.stroke.color)"
                                                  style="padding-left: 10em">color: {{p.stroke.color}}</span> <br/>
                                        <span style="padding-left: 5em">},</span> <br/>
                                        <span style="padding-left: 5em">path: [ </span> <br/>
                                            <span style="padding-left: 10em" class="false" ng-repeat="pt in p.path"
                                                  ng-click="p.path.splice($index,1)">
                                            {
                                            latitude:{{pt.latitude | number:2}},
                                            longitude:{{pt.longitude | number:2}}
                                        },
                                        <br/>
                                    </span>
                                        <span style="padding-left: 5em">] </span> <br/>

                                        }
                                    </i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
             <tr>
                <td>circles</td>
                <td>
                    <div class="well sidebar-nav">
                        <ul class="nav nav-list">
                            <li ng-repeat="c in map.circles" ng-cloak>
                                <a href="#">
                                    <i class="i" title="Click me to Show InfoWindow!">
                                        <span class="{{c.visible}}" ng-click="c.visible = !c.visible">Circle:</span> {<br/>
                                            <span style="padding-left: 5em" class="{{c.visible}}"
                                                  ng-click="c.visible = !c.visible">visible: {{c.visible}}</span>, <br/>
                                            <span style="padding-left: 5em" class="{{c.editable}}"
                                                  ng-click="c.editable = !c.editable">editable: {{c.editable}}</span>,
                                        <br/>
                                            <span style="padding-left: 5em" class="{{c.draggable}}"
                                                  ng-click="c.draggable = !c.draggable">draggable: {{c.draggable}}</span>,
                                        <br/>
                                            <span style="padding-left: 5em" class="{{c.geodesic}}"
                                                  ng-click="c.geodesic = !c.geodesic">geodesic: {{c.geodesic}}</span>,
                                        <br/>
                                        <span style="padding-left: 5em">stroke: {</span> <br/>
                                            <span ng-click="c.stroke.weight = (c.stroke.weight % 5) +1"
                                                  style="padding-left: 10em">weight: {{c.stroke.weight}}</span> <br/>
                                            <span ng-click="c.stroke.color = toggleColor(c.stroke.color)"
                                                  style="padding-left: 10em">color: {{c.stroke.color}}</span> <br/>
                                            <span ng-click="c.stroke.opacity = c.stroke.opacity*0.5"
                                                  style="padding-left: 10em">opacity: {{c.stroke.opacity}}</span> <br/>
                                        <span style="padding-left: 5em">},</span> <br/>
                                        <span style="padding-left: 5em">fill: {</span> <br/>
                                            <span ng-click="c.fill.color = toggleColor(c.fill.color)"
                                                  style="padding-left: 10em">color: {{c.fill.color}}</span> <br/>
                                            <span ng-click="c.fill.opacity = c.fill.opacity*0.5"
                                                  style="padding-left: 10em">opacity: {{c.fill.opacity}}</span> <br/>
                                        <span style="padding-left: 5em">},</span> <br/>
                                        <span style="padding-left: 5em">center: {</span> <br/>
                                            <span ng-click="c.center.latitude = (c.center.latitude % 5) +1"
                                                  style="padding-left: 10em">latitude: {{c.center.latitude}}</span> <br/>
                                            <span ng-click="c.center.longitude = (c.center.longitude % 5) +1"
                                                  style="padding-left: 10em">longitude: {{c.center.longitude}}</span> <br/>
                                        <span style="padding-left: 5em">},</span> <br/>
                                        <span style="padding-left: 5em" class="{{c.radius}}"
                                                  ng-click="c.radius = c.radius*10">radius: {{c.radius}}</span>
                                        <br/>
                                        <br/>
                                    </span>

                                        }
                                    </i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr>
                <td>polygons</td>
                <td>
                    <div class="well sidebar-nav">
                        <ul class="nav nav-list">
                            <li ng-repeat="p in map.polygons">
                                <a href="#">
                                    <i class="i" title="Click me to Show InfoWindow!">
                                        <span class="{{p.visible}}" ng-click="p.visible = !p.visible">Polygon:</span> {<br/>
                                            <span style="padding-left: 5em" class="{{p.visible}}"
                                                  ng-click="p.visible = !p.visible">visible: {{p.visible}}</span>, <br/>
                                            <span style="padding-left: 5em" class="{{p.editable}}"
                                                  ng-click="p.editable = !p.editable">editable: {{p.editable}}</span>,
                                        <br/>
                                            <span style="padding-left: 5em" class="{{p.draggable}}"
                                                  ng-click="p.draggable = !p.draggable">draggable: {{p.draggable}}</span>,
                                        <br/>
                                            <span style="padding-left: 5em" class="{{p.geodesic}}"
                                                  ng-click="p.geodesic = !p.geodesic">geodesic: {{p.geodesic}}</span>,
                                        <br/>
                                        <span style="padding-left: 5em">stroke: {</span> <br/>
                                            <span ng-click="p.stroke.weight = (p.stroke.weight % 5) +1"
                                                  style="padding-left: 10em">weight: {{p.stroke.weight}}</span> <br/>
                                            <span ng-click="p.stroke.color = toggleColor(p.stroke.color)"
                                                  style="padding-left: 10em">color: {{p.stroke.color}}</span> <br/>
                                        <span style="padding-left: 5em">},</span> <br/>
                                        <span style="padding-left: 5em">path: [ </span> <br/>
                                            <span style="padding-left: 10em" class="false" ng-repeat="pt in p.path"
                                                  ng-click="p.path.splice($index,1)">
                                            {
                                            latitude:{{pt.latitude | number:2}},
                                            longitude:{{pt.longitude | number:2}}
                                        },
                                        <br/>
                                    </span>
                                        <span style="padding-left: 5em">] </span> <br/>

                                        }
                                    </i>
                                </a>
                            </li>
                        </ul>
                    </div>
            </tbody>
        </table>
    </fieldset>
</div>
</div>
</div>
<script src="../website_libs/dev_deps.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script><script src="../dist/angular-google-maps_dev_mapped.js"></script>
<script src="./assets/scripts/mocks/heat-layer.js"></script>
<script src="./assets/scripts/controllers/example.js"></script>
<script src="./assets/scripts/controllers/templates/info.js"></script>
</body>

</html>
